<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2023-03-02 22:04:09
-->
<template>
    <div class="mvres">
        <div v-if="info.mvs.length != 0">
            <div class="count">
                <span>找到{{ info.mvsCount }}个MV</span>
            </div>
            <div class="list">
                <div class="item" v-for="(item, index) in info.mvs" :key="index">
                    <mvlist :item="item"></mvlist>
                </div>
            </div>
            <Pagination :total="info.mvsCount" :current-page="info.currentPage" :page-size="40"
                @handleCurrentChange="getSearchMVBy"></Pagination>
        </div>
        <div class="no" v-else>
            <el-empty description="数据正在加载~" :image-size="200"></el-empty>
        </div>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { reactive, onMounted } from 'vue'
import { getSearchMV } from '@/api/searchdetail/searchdetail.js'
import Pagination from '../../../components/content/Pagination.vue'
import mvlist from '../../../components/content/MVlist/mvlist.vue'
const route = useRoute()
const info = reactive({
    keyword: '',
    mvs: [],
    mvsCount: 0,
    currentPage: 1,
})

//获取mv数据
async function getSearchMVBy(page = 1) {
    info.currentPage = page
    let offset = (page - 1) * 40
    let res = await getSearchMV(info.keyword, offset)
    if (res.data.code == 200) {
        info.mvs = res.data.result.mvs
        info.mvsCount = res.data.result.mvCount
    }
}


onMounted(() => {
    info.keyword = route.params.keywords
    getSearchMVBy()
})
</script>

<style lang="scss" scoped>
.mvres {
    position: relative;

    .count {
        position: absolute;
        top: -35px;
        right: 40px;
        font-size: 14px;
        color: #c0bebe;
    }

    .list {
        display: flex;
        flex-wrap: wrap;

        .item {
            margin-bottom: 10px;
        }
    }

    .no {
        width: 100%;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
    }
}
</style>